<script setup lang="ts">
import './node-style.scss'
import {Node} from "@antv/x6";
import {inject, ref} from "vue";

const id=ref<string>()
const formData = reactive<any>({})
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    //console.log('node.setData',node,formData)
    node.setData(formData,{deep:true,overwrite:true})
  }
},{deep:true,immediate:false})
</script>

<template>
  <div class="node">
    <div class="line5 node-title">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-if_'+id"></div>
      <div>判断文件类型</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <div class="line5">
      <div class="flow-dot flow-file" magnet="true" x-type="input-file" :x-id="'input-file_'+id"></div>
      <div>单文件</div>
    </div>
    <div class="line5">
      <div class="flow-dot flow-file" magnet="true" x-type="input-files" :x-id="'input-files_'+id"></div>
      <div>多文件</div>
    </div>
    <div class="line5 output">
      <div>文件类型</div>
      <div class="flow-dot flow-string" magnet="true" x-type="output-string" :x-id="'output-text_'+id" x-key="text"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
